<template>
  <div class="mainbody">
    <dv-loading v-show="runFlag !== 0" class="loading">Loading...</dv-loading>
    <div class="container">
      <MainTitle :main-title="mainTitle" />
      <div class="button-group">
        <span>只看开机 </span><el-switch v-model="filter" active-color="#00f4ff" inactive-color="#bbb" />
        <el-select v-model="building">
          <el-option v-for="(item,index) in option" :key="index" :label="item.label" :value="item.value" />
        </el-select>
        <el-select v-model="floor">
          <el-option v-for="(item,index) in option2" :key="index" :label="item.label" :value="item.value" />
        </el-select>
      </div>
      <div class="elec-trend">
        <div class="trend_item">
          <div class="elec-trend-title">MAU设备实时状态</div>
          <el-select v-model="valve1" class="selector">
            <el-option v-for="(item,index) in valveType" :key="index" :label="item.label" :value="item.value" />
          </el-select>
        </div>
        <div class="trend_item">
          <div class="elec-trend-title">历史TCV散点图</div>
          <el-select v-model="valve1" class="selector">
            <el-option v-for="(item,index) in valveType" :key="index" :label="item.label" :value="item.value" />
          </el-select>
        </div>
        <div class="trend_item">
          <div class="elec-trend-title">历史TCV散点图</div>
          <el-select v-model="valve1" class="selector">
            <el-option v-for="(item,index) in valveType" :key="index" :label="item.label" :value="item.value" />
          </el-select>
        </div>
        <div class="trend_item">
          <div class="elec-trend-title">MAU负荷/送风量</div>
          <el-select v-model="valve1" class="selector">
            <el-option v-for="(item,index) in valveType" :key="index" :label="item.label" :value="item.value" />
          </el-select>
        </div>

      </div>
      <div class="view-frame">
        <EnergyCard
          v-for="(item,index) in finalList"
          :key="index"
          :best-machine="bestMachine"
          :time-data="timeData?timeData.find(e => e.machine_id === item.machine_id):{}"
          :current-data="item"
          :computed-data="computedData?computedData.find(e=>e.machine_id===item.machine_id):{}"
          :last7-data="last7Data?last7Data.filter(e=>e.machine_id===item.machine_id):{}"
        />
      </div>
    </div>
  </div>
</template>

<script>
import redisService from '@service/redisRequest.js'
import { mapState } from 'vuex'
import 'element-ui/lib/theme-chalk/index.css'
export default {
  name: 'Edftgyhj',
  components: {
    MainTitle: () => import('@/components/MainTitle.vue'),
    EnergyCard: () => import('./module/EnergyCard.vue')
    // vechart: () => import('@components/charts/Vechart.vue')
  },
  props: {
    title: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      runFlag: 0,
      filter: false,
      building: null,
      floor: null,
      valve1: 'tcv01',
      valveType: [{
        value: 'tcv01',
        label: '预热阀开度'
      }, {
        value: 'tcv02',
        label: '预冷阀开度'
      }, {
        value: 'tcv03',
        label: '增温加湿阀开度'
      }],
      option: [{
        value: 'fab',
        label: 'FAB'
      }, {
        value: 'mod',
        label: 'MOD'
      }, {
        value: 'mc',
        label: 'MC'
      }],
      option1: {
        fab: [{
          value: 'fab-l40',
          label: 'L40'
        }, {
          value: 'fab-roof',
          label: '屋面'
        }, {
          value: 'fab-l25',
          label: '传递间'
        }],
        mod: [{
          value: 'mod-l10',
          label: 'L10'
        }, {
          value: 'mod-roof',
          label: '屋面'
        }],
        mc: [{
          value: 'mc-l40',
          label: 'L40'
        }]
      },
      computedData: [],
      last7Data: [],
      dataList: [],
      machineData: [],
      timeData: [],
      redisService
    }
  },
  computed: {
    ...mapState({
      service: state => state.service,
      webModel: state => state.authentication.webModel,
      treeTemplate: state => state.component.treeTemplate
    }),
    mainTitle() {
      return this.title
    },
    option2() {
      return this.option1[this.building]
    },
    finalList() {
      if (!this.filter) {
        return this.dataList
      } else {
        if (this.timeData.length) {
          const currentList = []
          let e = {}
          this.dataList.forEach((item, index) => {
            e = this.timeData.find(el => el.machine_id === item.machine_id)
            currentList.push({ ...item, value: e.value })
          })
          return currentList.filter(i => i.value.find(i => i.tag_id === 's').value !== 0)
        } else {
          return []
        }
      }
    },
    bestMachine() {
      if (this.timeData.length && this.machineData.length && this.last7Data.length) {
        const building = this.machineData.find(e => e.building_id === this.building)
        const currentList = []
        const machine = building.children.find(e => e.id === this.floor).machine
        let e = {}
        machine.forEach((item, index) => {
          e = this.timeData.find(el => el.machine_id === item.machine_id)
          currentList.push({ ...item, value: e.value })
        })
        const bestMachine = currentList.map(e => {
          const item1 = this.last7Data.find(i => i.machine_id === e.machine_id && i.tag_id === 'p')
          const item2 = this.last7Data.find(i => i.machine_id === e.machine_id && i.tag_id === 'iv')
          const value = item2.value[item2.value.length - 1] * e.info.area / item1.value[item1.value.length - 1]
          return item1.value[item1.value.length - 1] ? value : 0
        })
        if (Math.max(...bestMachine) > 0) {
          const ind = bestMachine.indexOf(Math.max(...bestMachine))
          const id = currentList[ind]
          return id.machine_id
        } else {
          return ''
        }
      } else {
        return ''
      }
    }
  },
  watch: {
    building(val, oldval) {
      this.floor = this.option2[0].value
      const building = this.machineData.find(e => e.building_id === this.building)
      if (building && building.children) {
        const machine = building.children.find(e => e.id === this.floor).machine
        this.dataList = machine
      } else {
        this.dataList = []
      }
    },
    floor(val, oldval) {
      const building = this.machineData.find(e => e.building_id === this.building)
      if (building && building.children) {
        const machine = building.children.find(e => e.id === this.floor).machine
        this.dataList = machine
      } else {
        this.dataList = []
      }
    }
  },
  created() {
    this.building = 'fab'
    this.floor = this.option2[0].value
    this.init()
    setTimeout(() => {
      this.runFlag = 0
    }, 100000)
  },
  mounted() {
  },
  methods: {
    async getEmsBuildingMachine() {
      this.runFlag = 1
      const result1 = await this.service.getEmsBuildingMachine()
      if (!result1 || !result1.data) {
        this.$notify({
          title: '楼层设备信息获取失败',
          type: 'error',
          duration: 2500
        })
        this.runFlag = 0
        return
      }
      this.machineData = result1.data
      const building = this.machineData.find(e => e.building_id === this.building)
      if (building && building.children) {
        const machine = building.children.find(e => e.id === this.floor).machine
        this.dataList = machine
      } else {
        this.dataList = []
      }
      this.runFlag = 0
    },
    async getEmsMAUComputedData() {
      this.runFlag = 1
      const result2 = await this.service.getEmsMAUComputedData()
      if (!result2 || !result2.data) {
        this.$notify({
          title: 'COP数据获取失败',
          type: 'error',
          duration: 2500
        })
        this.runFlag = 0
        return
      }
      this.computedData = result2.data[0].data
      this.runFlag = 0
    },
    async getEmsMAULast7Data() {
      this.runFlag = 1
      const result3 = await this.service.getEmsMAULast7Data()
      if (!result3 || !result3.data) {
        this.$notify({
          title: '阀门开度数据获取失败',
          type: 'error',
          duration: 2500
        })
        this.runFlag = 0
        return
      }
      this.last7Data = result3.data
      this.runFlag = 0
    },
    async getMAUCurrentData() {
      this.runFlag = 1
      const result4 = await this.service.getMAUCurrentData()
      if (!result4 || !result4.data) {
        this.$notify({
          title: '阀门开度数据获取失败',
          type: 'error',
          duration: 2500
        })
        this.runFlag = 0
        return
      }
      this.timeData = result4.data
      this.runFlag = 0
    },
    async init() {
      this.getEmsBuildingMachine()
      this.getEmsMAUComputedData()
      this.getEmsMAULast7Data()
      this.getMAUCurrentData()
    }
  }
}
</script>

<style lang="scss" scoped>
.loading{
  position: absolute;
  width: 100%;
  height: 100%;
  background: rgba($color: #333, $alpha: 0.7);
  z-index: 9;
}
.mainbody{
  height: 100vh;
  background: url('~@assets/report/leftbg.jpg') no-repeat;
  background-size: 100% 100%;
}
.container{
  position: relative;
  width: 95%;
  height: 100%;
  margin: 0 auto;
  display: flex;
  flex-flow: column;
}
.view-frame{
  display: flex;
  flex-flow: column nowrap;
  height: 78%;
  justify-content: flex-start !important;
  overflow-y:scroll;
  // margin-top: 1rem;
  // 隐藏滚动条
  &::-webkit-scrollbar {// 兼容Chrome
    display: none;
  }
  &::-o-scrollbar {// 兼容Opera
    display: none;
  }
  scrollbar-width: none;// 兼容Firefox
  -ms-overflow-style: none;// 兼容edge
}
.button-group{
  position: absolute;
  top: 3% !important;
  right: 0;
}

.button-group>span{
  display: inline-block;
  height: 20px;
  line-height: 20px;
  font-size: 1.2rem;
  margin: 0 0.3rem;
  }
.button-group span .el-input__icon{
  line-height: 3rem;
}
.elec-trend{
  display: flex;
  height: 3rem;
  justify-content: space-between;
  border-bottom: 1px solid #aaa;
  margin: 1rem 0;
  .trend_item{
    flex-basis: 23%;
    display: flex;
    justify-content: space-between;
    .elec-trend-title{
      font-size: 1.5rem;
      font-weight: 600;
      line-height: 3rem;
    }
    .selector .el-input--suffix .el-input__inner{
      width: 12rem;
      height: 2rem;
      line-height: 2rem;
      background: transparent;
      border: 1.5px solid rgba(233, 232, 232, 0.5);
      border-radius: 0;
      padding:0 0 0 1rem;
      margin-left: 1rem;
      color: #FFF;
      font-size: 1rem;
    }
    .selector span .el-input__icon{
      line-height: 2rem;
    }
    .selector .el-input__suffix{
      right: 0;
    }
  }
}

</style>
<style>
.button-group .el-input--suffix .el-input__inner{
    width: 9rem;
    height: 3rem;
    background: transparent;
    border: 1.5px solid rgba(233, 232, 232, 0.5);
    border-radius: 0;
    padding-left: 1rem;
    margin-left: 1rem;
    color: #FFF;
    font-weight: 600;
  }
  .button-group span .el-input__icon{
      line-height: 3rem;
  }
</style>
